<template>
	<el-dialog
		title="权限设置"
		v-model="visible"
		:width="600"
		destroy-on-close
		@closed="$emit('closed')"
	>
		<div class="checkItem" v-for="(item, i) in permission" :key="i">
			<el-checkbox
				class="checkLabel"
				@change="handChange($event, item)"
				v-model="item.isDisabled"
				>{{ item.name }}</el-checkbox
			>
			<el-checkbox
				v-for="(checkedItem, ci) in item.children"
				v-model="checkedItem.isDisabled"
				:key="ci"
				@change="checkedChange($event, checkedItem, item)"
				>{{ checkedItem.name }}</el-checkbox
			>
		</div>

		<template #footer>
			<el-button
				type="primary"
				size="small"
				:loading="isSaveing"
				@click="childFunc(true)"
			>
				全 选
			</el-button>
			<el-button
				type="primary"
				size="small"
				:loading="isSaveing"
				@click="childFunc(false)"
			>
				全不选
			</el-button>
			<el-button
				size="small"
				type="primary"
				:loading="isSaveing"
				@click="submit()"
			>
				保 存
			</el-button>
			<el-button size="small" @click="visible = false">取 消</el-button>
		</template>
	</el-dialog>
</template>

<script>
import setting from "./setting";
import permissionSetting from "../permission/setting";
export default {
	emits: ["success", "closed"],
	data() {
		return {
			visible: false,
			isSaveing: false,
			isIndeterminate: true,
			permission: [],
			data: {
				dataType: "1",
				list: [],
				checked: [],
				props: {},
				rule: "",
			},
			role: null,
			checkedAll: [],
			// checkList: [],
		};
	},
	// watch: {
	// 	checkedAll(newVal) {
	// 		this.checkList = [];
	// 		if (newVal & newVal.length) {
	// 			newVal.map((Item) => {
	// 				if (!this.checkList.includes(Item.id)) {
	// 					this.checkList.push(Item.id);
	// 				}
	// 			});
	// 		}
	// 	},
	// },
	mounted() {},
	methods: {
		// 全选/全不选
		childFunc(val) {
			this.checkedAll = [];
			if (val) {
				this.permission.forEach((item) => {
					item.isDisabled = true;
					this.checkedAll.push(item);
					if (item.children.length) {
						item.children.map((childItem) => {
							childItem.isDisabled = true;
							this.checkedAll.push(childItem);
						});
					}
				});
			} else {
				this.permission.forEach((item) => {
					item.isDisabled = false;
					if (item.children.length) {
						item.children.map((childItem) => {
							childItem.isDisabled = false;
						});
					}
				});
			}
		},
		// 每行全选/取消全选
		handChange(val, item) {
			if (val) {
				if (item.children.length) {
					item.children.forEach((childrenItem) => {
						childrenItem.isDisabled = true;
						this.checkedAll.push(childrenItem);
					});
				}
				this.checkedAll.push(item);
			} else {
				if (item.children.length) {
					for (let i = this.checkedAll.length - 1; i >= 0; i--) {
						const item2 = this.checkedAll[i];
						for (const item1 of item.children) {
							if (item2.id === item1.id) {
								item1.isDisabled = false;
								this.checkedAll.splice(i, 1);
								break;
							}
						}
					}
					// this.checkedAll.forEach((Item, I) => {
					// 	item.children.forEach((childrenItem) => {
					// 		if (Item.id == childrenItem.id) {
					// 			childrenItem.isDisabled = false;
					// 			this.checkedAll.splice(I, 1);
					// 		}
					// 	});
					// });
				}
				this.checkedAll.map((Item, I) => {
					if (Item.id == item.id) {
						this.checkedAll.splice(I, 1);
					}
				});
			}
		},
		// 全选/单个选择
		checkedChange(val, Citem, item) {
			if (val) {
				this.checkedAll.push(Citem);
			} else {
				this.checkedAll.map((Item, I) => {
					if (Item.id == Citem.id) {
						this.checkedAll.splice(I, 1);
					}
				});
			}
			let childFlag = [];
			if (item.children.length) {
				item.children.map((item) => {
					childFlag.push(item.isDisabled);
				});
			}
			if (childFlag.includes(false) || childFlag.includes(0)) {
				this.checkedAll.map((Item, I) => {
					if (Item.id == item.id) {
						this.checkedAll.splice(I, 1);
					}
				});
				item.isDisabled = false;
			} else {
				item.isDisabled = true;
				this.checkedAll.push(item);
			}
		},
		open(role) {
			this.visible = true;
			this.role = role;
			this.loadPermission();
		},
		submit() {
			this.isSaveing = true;
			let checkedKeys = [];
			this.checkedAll.map((item) => {
				checkedKeys.push(item.id);
			});
			this.save([...new Set(checkedKeys)]);
		},
		async save(ids) {
			console.log(ids);
			var res = await setting.api.permissionSave.post({
				permissionIds: ids,
				id: this.role.id,
			});
			this.loading = false;
			this.visible = false;
			if (res.code == setting.successCode) {
				this.$message.success("操作成功");
			} else {
				this.$message.warning(res.message);
			}
		},
		async loadPermission() {
			let res;
			res = await permissionSetting.api.tree.get();
			if (res.code == permissionSetting.successCode) {
				this.permission = res.data;
			} else {
				this.$message.warning(res.message);
				return;
			}
			res = await setting.api.permissionList.get({
				roleId: this.role.id,
				pageIndex: 1,
				pageSize: Math.pow(2, 30),
			});
			if (res.code == setting.successCode) {
				this.permission.forEach((item) => {
					res.data.forEach((citem) => {
						if (item.id == citem.permissionId) {
							item.isDisabled = true;
							this.checkedAll.push(item);
						}
						if (item.children.length) {
							item.children.map((childItem) => {
								if (childItem.id == citem.permissionId) {
									childItem.isDisabled = true;
									this.checkedAll.push(childItem);
								}
							});
						}
					});
				});
			} else {
				this.$message.warning(res.message);
				return;
			}
		},
	},
};
</script>

<style scoped>
.treeMain {
	height: 300px;
	overflow: auto;
	margin-bottom: 10px;
}

.checkLabel {
	width: 180px;
	border-right: 1px solid #ccc;
	margin-right: 20px;
}

.checkItem {
	width: 100%;
	display: flex;
	padding-bottom: 20px;
	padding-left: 20px;
}

.el-overlay .el-overlay-dialog .el-dialog {
	max-height: 700px !important;
}

.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
	max-height: 500px !important;
	overflow-y: auto;
}
.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
	padding: calc(var(--el-dialog-padding-primary) - 10px)
		var(--el-dialog-padding-primary)
		calc(var(--el-dialog-padding-primary) - 10px)
		var(--el-dialog-padding-primary) !important;
}

.el-overlay .el-overlay-dialog .el-dialog .el-dialog__footer {
	padding: 10px !important;
	position: relative;
}

.el-overlay .el-overlay-dialog .el-dialog .el-dialog__footer .head {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translate(0, -50%);
}
</style>
